<template>
  <div class="anchorstation">
    <div class="banxin flex bd">
      <Catelist :arr="iconlist"></Catelist>
      <div class="flex list banxin">
        <Programlist :arr="programlist" title="推荐节目"></Programlist>
        <Rankinglist :arr="toplist" title="节目排行榜"></Rankinglist>
      </div>
      <RadioList></RadioList>
      <RadioList></RadioList>
      <RadioList></RadioList>
      <RadioList></RadioList>
      <RadioList></RadioList>
    </div>
  </div>
</template>
 
<script>
import Catelist from "./Catelist";
import Programlist from "./Programlist";
import Rankinglist from "./Rankinglist";
import RadioList from "./RadioList";
import { getcatelistApi, getrecommendApi, gettoplistApi } from "../../http/api";
export default {
  data() {
    return {
      // 图标列表
      iconlist: [],
      // 节目列表
      programlist: [],
      // 节目排行榜列表
      toplist: [],
    };
  },
  components: {
    Catelist,
    Programlist,
    Rankinglist,
    RadioList,
  },
  created() {
    // 分类
    this.getcatelistApi();
    // 推荐节目
    this.getrecommendApi();
    // 节目排行榜
    this.gettoplistApi();
  },
  methods: {
    async getcatelistApi() {
      let res = await getcatelistApi();
      if (res.code === 200) {
        this.iconlist = res.categories;
        console.log(this.iconlist);
      }
    },
    async getrecommendApi() {
      let res = await getrecommendApi();
      if (res.code === 200) {
        this.programlist = res.programs;
        console.log(this.programlist);
      }
    },
    async gettoplistApi() {
      let res = await gettoplistApi();
      this.toplist = res.toplist;
      console.log(this.toplist);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.banxin {
  &.bd {
    border: 1px solid #ccc;
  }
  flex-wrap: wrap;
  .list {
    justify-content: space-between;
    border: 0;
    margin: 40px -20px;
    .programlist {
      flex: 1;
    }
  }
}
</style>